<script setup>
import userTitle from "@/components/userTitle.vue";
import axios from "axios";
import { ref, onMounted } from "vue";
const myMes = ref(null);
const myGotMes = ref([]);
onMounted(async () => {
  let userid = localStorage.getItem("userId");
  let res = await axios.get(`http://localhost:3000/userList/${userid}`);
  let { data } = await axios.get("http://localhost:3000/messages");
  console.log(data);
  myMes.value = data.filter((item) => item.userId == userid);
  console.log(myMes.value);
  myMes.value.forEach((item) => {
    item.replies.forEach((item) => {
      if (item.toWho == res.data.username) {
        myGotMes.value.push(item);
      }
    });
  });
});
</script>

<template>
  <div class="">
    <userTitle>站内消息</userTitle>
    <h4>我发布的留言</h4>
    <ul class="myMes" v-if="myMes?.length>0">
      <li v-for="item in myMes" :key="item.id">
        <span>{{ item.time }}</span>
        <span>{{ item.content }}</span>
      </li>
    </ul>
    <el-empty description="没有发布留言" v-else/>
    <h4>我收到的回复</h4>
    <ul class="myGotMes" v-if="myGotMes?.length>0">
      <li v-for="item in myGotMes" :key="item.id">
        <div>
          <span>{{ item.username }}</span>
          <span>{{ item.time }}</span>
        </div>

        <div>{{ item.content }}</div>
      </li>
    </ul>
    <el-empty description="没有收到回复" v-else/>
  </div>
</template>

<style scoped lang="scss">
.myMes,
.myGotMes {
  display: flex;
  flex-direction: column;
  .el-empty {
  height: 20%;
  background-color: red;
}
}

</style>
